<template>
  <div class="visitor-send">
    <img
      class="banner"
      src="../../assets/image/banner/sendBanner.png"
    >
    <div class="info-wrap">
      <div class="title">被访人信息</div>
      <div class="card">
        <div class="item-wrap">
          <div class="input-title"><span>被访人姓名</span></div>
          <div class="input-wrap">
            <input
              v-model="form.interviewedName"
              class="input-content"
              type="text"
              maxlength="10"
              data-name="interviewedName"
              placeholder="请输入姓名"
              @input="userInput"
            >
          </div>
        </div>
        <div class="item-wrap">
          <div class="input-title"><span class="must-fill">被访人电话</span></div>
          <div class="input-wrap">
            <input
              v-model="form.interviewedPhone"
              class="input-content"
              data-name="interviewedPhone"
              placeholder="请输入电话"
              pattern="[0-9]*"
              maxlength="11"
              type="tel"
              @input="userInput"
            >
          </div>
        </div>
        <div class="item-wrap" @click="STPicker = true">
          <div class="input-title"><span class="must-fill">开始时间</span></div>
          <div class="input-wrap">
            <span :class="form.beginTime ? 'input-content input-black' : 'input-content input-gray'">
              {{ form.beginTime ? form.beginTime:'开始时间' }}</span>
          </div>
        </div>
        <div class="item-wrap" @click="DTPicker = true">
          <div class="input-title"><span class="must-fill">结束时间</span></div>
          <div class="input-wrap">
            <span :class="form.endTime ? 'input-content input-black' : 'input-content input-gray'">
              {{ form.endTime ? form.endTime:'结束时间' }}</span>
          </div>
        </div>
        <div class="item-wrap">
          <div class="input-title"><span>随行人数</span></div>
          <div class="input-wrap">
            <input
              v-model="form.alongWith"
              class="input-content"
              data-name="alongWith"
              placeholder="请输入随行人数"
              pattern="[0-9]*"
              maxlength="10"
              type="tel"
              @input="userInput"
            >
          </div>
        </div>
        <div class="item-wrap">
          <div class="input-title"><span>访问事由</span></div>
          <div class="input-wrap">
            <input
              v-model="form.visitorReason"
              class="input-content"
              type="text"
              maxlength="15"
              data-name="visitorReason"
              placeholder="请输入访问事由"
              @input="userInput"
            >
          </div>
        </div>
        <div class="item-wrap">
          <div class="input-title"><span>车辆信息</span></div>
          <div class="input-wrap">
            <input
              v-model="form.carNumber"
              class="input-content"
              type="text"
              maxlength="10"
              data-name="carNumber"
              placeholder="请输入车辆信息"
              @input="userInput"
            >
          </div>
        </div>
      </div>
    </div>
    <div class="info-wrap">
      <div class="title" @click="userInfo_show = userInfo_show ? false : true">我的信息<img
        class="icon-more"
        src="../../assets/image/icon/icon_more.png"
        alt=""
      ></div>
      <div :class="userInfo_show ? 'card' : 'card card-hide'">
        <div class="item-wrap">
          <div class="input-title"><span class="must-fill">访客姓名</span></div>
          <div class="input-wrap">
            <input
              v-model="form.visitorName"
              maxlength="10"
              class="input-content"
              type="text"
              data-name="visitorName"
              placeholder="请输入访客姓名"
              @input="userInput"
            >
          </div>
        </div>
        <div class="item-wrap">
          <div class="input-title"><span class="must-fill">身份证号</span></div>
          <div class="input-wrap">
            <input
              v-model="form.visitorIdCardNumber"
              class="input-content"
              type="text"
              maxlength="18"
              data-name="visitorIdCardNumber"
              placeholder="请输入身份证号"
              @input="userInput"
            >
          </div>
        </div>
        <div class="item-wrap">
          <div class="input-title"><span class="must-fill">访客电话</span></div>
          <div class="input-wrap">
            <input
              v-model="form.visitorPhone"
              class="input-content"
              type="tel"
              maxlength="11"
              pattern="[0-9]*"
              data-name="visitorPhone"
              placeholder="请输入访客电话"
              @input="userInput"
            >
          </div>
        </div>
      </div>
    </div>

    <SjButton :name-str="'提交信息'" :can-submit="canSubmit" style="margin-top:25px" @click="submit"></SjButton>

    <SjDateTime :show-picker="STPicker" @selected="STSeclected" @cancel="STSeclected"></SjDateTime>
    <SjDateTime :show-picker="DTPicker" @selected="DTSeclected" @cancel="DTSeclected"></SjDateTime>
  </div>
</template>

<script>
import vant from 'vant'
import { userGetAPI, visitFlowApplyAPI, getNameByPhoneAPI } from '@/axios/api/visitor'
import SjButton from '@/components/SjButton/index.vue'
import SjDateTime from '@/components/SjDateTime/index.vue'
export default {
  name: 'VisitorSend',
  components: {
    SjButton,
    SjDateTime
  },
  data() {
    return {
      form: {
        // 拜访信息
        interviewedName: '',
        interviewedPhone: '',
        beginTime: '',
        endTime: '',
        alongWith: '',
        visitorReason: '',
        carNumber: '',
        // 访客信息
        visitorName: '',
        visitorIdCardNumber: '',
        visitorPhone: ''
      },
      DpPicker: false,
      STPicker: false,
      DTPicker: false,
      userInfo_show: false
    }
  },
  computed: {
    canSubmit() {
      if (this.form.interviewedPhone && this.form.beginTime && this.form.endTime && this.form.visitorName && this.form.visitorIdCardNumber && this.form.visitorPhone) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    this.unitId = localStorage.getItem('visitorH5_unitId')
    if (this.$route.query.invitePhone) {
      this.getInviteInfo(this.$route.query.invitePhone)
    }
  },
  activated() {
    document.title = this.getUnitInfo().name
    this.visitAgain(localStorage.getItem('visitHistory'))
    this.getUserInfo()
  },
  methods: {
    // 快捷预约
    visitAgain(item) {
      if (item) {
        const info = JSON.parse(item)
        this.form = Object.assign(this.form, info)
        localStorage.removeItem('visitHistory')
      }
    },
    // 开始时间
    STSeclected(e) {
      this.STPicker = e.showPicker
      e.value && (this.form.beginTime = e.value)
    },
    // 结束时间
    DTSeclected(e) {
      this.DTPicker = e.showPicker
      e.value && (this.form.endTime = e.value)
    },
    userInput(e) {
      this.form[e.target.dataset.name] = e.target.value.replace(/\s*/g, '')
    },
    // 点击提交，格式校验--此时所有必填项均已填入
    submit() {
      if (this.form.interviewedPhone && !(/^1[3456789]\d{9}$/.test(this.form.interviewedPhone))) return vant.Toast('被访人手机号格式有误，请重新输入')
      // 时间校验 兼容ios replace(/-/g, '/')
      if (new Date(this.form.beginTime.replace(/-/g, '/')).getTime() < new Date().getTime()) return vant.Toast('开始时间必须大于当前时间')
      if (new Date(this.form.beginTime.replace(/-/g, '/')).getTime() >= new Date(this.form.endTime.replace(/-/g, '/')).getTime()) return vant.Toast('开始时间必须小于结束时间')
      if (new Date(this.form.beginTime.replace(/-/g, '/')).toDateString() !== new Date(this.form.endTime.replace(/-/g, '/')).toDateString()) return vant.Toast('开始时间和结束时间必须为同一天')

      if (this.form.alongWith && !(/^[1-9]\d*$/.test(this.form.alongWith))) return vant.Toast('随行人数必须为正整数')
      const ID_reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      if (!ID_reg.test(this.form.visitorIdCardNumber)) return vant.Toast('身份证格式有误，请重新输入')
      if (!(/^1[3456789]\d{9}$/.test(this.form.visitorPhone))) return vant.Toast('访客手机号格式有误，请重新输入')
      this.finalSubmit()
    },
    // 获取--访客信息
    getUserInfo() {
      userGetAPI().then(res => {
        this.form.visitorName = res.name
        this.form.visitorPhone = res.phone
        this.form.visitorIdCardNumber = res.idCardNumber
      }).catch(res => {
        console.log('获取访客信息失败')
      })
    },
    finalSubmit() {
      const params = Object.assign({}, this.form)
      params.beginTime = params.beginTime + ':00'
      params.endTime = params.endTime + ':00'
      params.unitId = this.unitId
      visitFlowApplyAPI(params).then(res => {
        this.$router.push({ path: '/visitorSuccess' })
      }).catch(res => {
        vant.Toast((res.data && res.data.type === 1) ? res.data.detail : '提交失败')
      })
    },
    getInviteInfo(phone) {
      getNameByPhoneAPI({ phone }).then(res => {
        this.form.interviewedPhone = phone
        this.form.interviewedName = res
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.visitor-send {
  padding: 12px 15px;
  background: #f8f9fa;

  .banner {
    width: 100%;
    display: block;
    border-radius: 12px;
  }

  .info-wrap {
    padding-top: 3px;
    .title {
      line-height: 39px;
      font-size: 18px;
      font-weight: 500;

      .icon-more {
        margin: 0 0 0 4px;
        width: 14px;
        height: 14px;
      }
    }

    .card-hide {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    .card {
      transition: all 0.2s linear;
      padding: 8px 15px 24px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0px 3px 6px rgba(38, 126, 255, 0.16);

      .item-wrap {
        position: relative;
        height: 46px;
        padding: 16px 0 8px;
        border-bottom: 1px solid #f1f2f3;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .input-title {
          width: 92px;
          min-width: 92px;
          height: 21px;

          span {
            line-height: 21px;
            font-size: 15px;
            color: #707070;
          }
          .must-fill:after {
            content: "* ";
            font-size: 15px;
            color: #f5222d;
          }
        }
        .input-wrap {
          width: 100%;
          height: 21px;

          .input-content {
            width: 100%;
            line-height: 21px;
            font-size: 15px;
            color: black;
          }
          .input-black {
            color: black !important;
          }
          .input-gray {
            color: #c6c9cc !important;
          }
        }
        .icon-down {
          position: absolute;
          top: 21px;
          right: 12px;
          width: 12px;
          height: 12px;
        }
      }
    }
  }
}
</style>
